<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="one">

        <div class="title">
            <span class="active"><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入手机号：</label>
                <input type="text" class="onephone">
            </div>
            <button>下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <!-- <br> -->
    <div class="two">

        <hr>
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span class="active"><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="xxxx" disabled>
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="xxxx" class="t-phone">
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="xxxxxxx" disabled>
            </div>
            <div class="input-item" id="aninput">
                <label>密保答案：</label>
                <input type="text" class="answer">
            </div>
            <button class="pre">上一步</button>
            <button class="next">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <div class="three">

        <br>
        <hr>
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span class="active"><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item" id="repass">
                <label>请输入新密码：</label>
                <input type="text">
            </div>
            <button class="tnext">上一步</button>
            <button class="reset">立即重置</button>
        </div>
    </div>

</body>

<!-- <script>
    $('.one button').on('click', function () {
        const onephone = $('.onephone').val().trim()
        let res = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
        if (!res.test(onephone)) {//不成功
            alert('手机格式错误')
            return
        } else {
            $.ajax({
                method: 'GET',
                // url: 'http://124.223.14.236:3001/api/user/findPwd',
                url: 'http://124.223.14.236:3001/api/user/findPwd',
                data: {
                    phone: `${onephone}`,
                },
                success: function (res) {
                    console.log(res);
                    const { data } = res
                    $('.reset').on('click', function () {

                        $.ajax({
                            method: 'POST',
                            url: 'http://124.223.14.236:3001/api/user/resetPwd',
                            data: {
                                id: data.id,
                                answer: $('#aninput input').val(),
                                password: $('#repass input').val()
                            },
                            success(res) {
                                console.log(res);

                            }
                        })
                    })
                }
            })
            $('.one').hide()
            $('.two').show()
        }
    })

    // 第二个页面
    $('.pre').on('click', function () {
        const number = $('.onephone').val()
        // console.log(number);
        // 判断密保问题是否正确
        $('.t-phone').val(number)
        $('.two').hide()
        $('.one').show()
    })
    $('.next').on('click', function () {
        $('.two').hide()
        $('.three').show()
        const answer = $('.answer').val().trim()
        // console.log(answer);

    })

    //第三个页面
    $('.tnext').on('click', function () {
        $('.three').hide()
        $('.two').show()
    })
</script> -->

<script>
    $('.one button').on('click', function () {
        const onephone = $('.onephone').val().trim()
        let res = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
        if (!res.test(onephone)) {
            return alert('手机格式错误')
        } else {
            $.ajax({
                method: 'GET',
                url: 'http://124.223.14.236:3001/api/user/findPwd',
                data: {
                    phone: `${onephone}`
                },
                success: function (res) {
                    // console.log(res);
                    const { data } = res
                    $('.reset').on('click', function () {
                        $.ajax({
                            method: 'POST',
                            url: 'http://124.223.14.236:3001/api/user/resetPwd',
                            data: {
                                id: data.id,
                                answer: $('#aninput input').val(),
                                password: $('#repass input').val()
                            },
                            success(res) {
                                console.log(res);
                            }
                        })
                    })
                }
            })
            $('.one').hide()
            $('.two').show()
        }
    })

    //第二个页面
    $('.pre').on('click', function () {
        const number = $('.onephone').val()
        $('.t-phone').val(number)
        $('.two').hide()
        $('.one').show()
    })
    $('.next').on('click', function () {
        $('.two').hide()
        $('.three').show()
        const answer = $('.answer').val().trim()
        console.log(answer);
    })

    //第三个页面
    $('.tnext').on('click', function () {
        $('.three').hide()
        $('.two').show()
    })
</script>
</body>

</html>